import { View, Text, StatusBar, FlatList, TouchableOpacity, Image, StyleSheet, useWindowDimensions } from 'react-native'
import React from 'react'
import { zhBorderColor, zhBorderWidth, zhSpacingColBase, zhSpacingColLg, zhThemeColor } from '../../global'
import { useRouter } from 'expo-router'

export default function community() {
  // 获取屏幕的宽度
  const {width} = useWindowDimensions()
  // 计算出图像的宽度
  const iconWidth = width * 0.5 * 0.4
  // 创建路由对象，用于跳转
  const router = useRouter()
  // 一组宫格数据，等待渲染的数据列表
  const menuList = [
    {id: 101, title: '社区商城', icon: require('../../assets/img/cart.png'),href: '/mall/list'},
    {id: 102, title: '社区医疗', icon: require('../../assets/img/hospital.png'),href: '/mall/list'},
    {id: 103, title: '邻里互动', icon: require('../../assets/img/tree.png'),href: '/mall/list'},
    {id: 104, title: '社区活动', icon: require('../../assets/img/news.png'),href: '/mall/list'},
    {id: 105, title: '便民服务', icon: require('../../assets/img/list.png'),href: '/mall/list'},
    {id: 106, title: '志愿服务', icon: require('../../assets/img/earth.png'),href: '/mall/list'},
  ]
  // 用于渲染每一下的格式
  const renderMenuItem = ({item}) => {
    return (
      <TouchableOpacity 
        activeOpacity={0.6} 
        style={ss.menu}
        onPress={() => router.push(item.href)}
      >
        <Image 
          source={item.icon} 
          style={[
            ss.icon,
            {width: iconWidth, height: iconWidth}
          ]}
        />
        <Text style={ss.title}>{item.title}</Text>
      </TouchableOpacity>
    )
  }
  return (
    <View>
      {/* F1: 顶部状态栏 */}
      <StatusBar 
        backgroundColor={zhThemeColor}
        barStyle="light-content"
      />
      {/* F2: 导航栏，已经由_layout.js设置完成 */}
      {/* F3: 六宫格 */}
      {/* FlatList 列表组件
        data  要渲染的数据
        renderItem  函数，每一项要渲染的JSX
          // item  每条数据
      */}
      <FlatList 
        data={menuList}
        // 每一行的列数
        numColumns={2}
        // 类似于列表渲染中的key，为了高效渲染
        keyExtractor={item => item.id}
        renderItem={renderMenuItem}
      />
    </View>
  )
}
// 
const ss = StyleSheet.create({
  menu: {
    width: '50%',
    borderWidth: zhBorderWidth*0.5,
    borderColor: zhBorderColor,
    alignItems: 'center',
    paddingVertical: zhSpacingColLg * 3
  },
  icon: {
    marginBottom: zhSpacingColBase
  },
  title: {

  }
})